<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import gsap from 'gsap';
import NavMenu from '../component/NavMenu.vue';
import ProductCard from '../../components/ProductCard.vue';
import BottomLine from '../component/BottomLine.vue';
import img1 from '../../assets/img2.png';
import img2 from '../../assets/img3.png';
import img3 from '../../assets/img1.jpg';
const imageList = ref([
  { imageUrl: img1, link: '/aboutUs' },
  { imageUrl: img2, link: '/aboutUs' },
  { imageUrl: img3, link: '/aboutUs' },
]);

const router = useRouter();
const handleCarouselClick = (index: number) => {
  const link = imageList.value[index].link;
  if (link) {
    router.push(link);
  }
};

const hasAnimated = ref(false);

// 页面加载时应用动画
onMounted(() => {
  // 使用 IntersectionObserver 监听视口的进入
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && entry.boundingClientRect.top > 0) {
          hasAnimated.value = true; // 标记动画已触发

          // 触发动画：标题（从透明到不透明）
          gsap.fromTo('.app span',
            { opacity: 0, visibility: 'hidden', y: 50 },
            { opacity: 1, visibility: 'visible', y: 0, duration: 1, ease: 'ease-out' }
          );

          // 触发动画：产品列表（从透明到不透明）
          gsap.fromTo('.product-list',
            { opacity: 0, visibility: 'hidden', y: 50 },
            { opacity: 1, visibility: 'visible', y: 0, duration: 1, ease: 'ease-out', delay: 0.3 }
          );

          // 触发动画：每个产品卡片（从透明到不透明）
          gsap.fromTo('.product-card',
            { opacity: 0, visibility: 'hidden', y: 50 },
            { opacity: 1, visibility: 'visible', y: 0, duration: 1, stagger: 0.2, delay: 0.6 }
          );
        }
      });
    },
    { threshold: 0.2 } // 50% 可见时触发
  );

  // 开始观察 .app 元素
  const appElement = document.querySelector('.app');
  if (appElement) {
    observer.observe(appElement);
  }
});
</script>

<template>
  <div>
    <NavMenu />
    <div style="height:50px"></div>
    <el-carousel :interval="4000" type="card" height="550px">
      <el-carousel-item v-for="(item, index) in imageList" :key="index" @click="handleCarouselClick(index)">
        <img :src="item.imageUrl" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;" />
      </el-carousel-item>
    </el-carousel>
    <div style="height:50px">

    </div>
    <div class="app">
      
        <span>产品与服务</span>
      
      <div class="product-list">
          <ProductCard title="钓鱼网站检测"
            description="通过先进的机器学习算法和实时数据分析，平台能够快速识别和检测钓鱼网站。系统会自动扫描网站内容、URL结构和行为模式，判断其是否为钓鱼网站，并提供详细的检测报告，帮助用户防范网络钓鱼攻击。"
            image="https://web-hualicat.oss-cn-hangzhou.aliyuncs.com/%E4%BA%A7%E5%93%81%E4%B8%8E%E6%9C%8D%E5%8A%A11.png" />

          <ProductCard title="用户上传可疑网站"
            description="用户可以通过平台上传可疑的网站链接，系统将自动进行分析和检测。平台支持批量上传和实时检测，用户可以随时查看检测结果和报告，确保及时识别潜在的钓鱼威胁。"
            image="https://web-hualicat.oss-cn-hangzhou.aliyuncs.com/%E4%BA%A7%E5%93%81%E4%B8%8E%E6%9C%8D%E5%8A%A12.png" />
          <ProductCard title="检测模型"
            description="平台采用先进的检测模型，结合深度学习和大数据分析技术，能够高效识别钓鱼网站的特征和行为模式。模型持续优化和更新，确保检测的准确性和实时性，为用户提供可靠的防护。"
            image="https://web-hualicat.oss-cn-hangzhou.aliyuncs.com/%E4%BA%A7%E5%93%81%E4%B8%8E%E6%9C%8D%E5%8A%A13.png" />
      </div>
    </div>
    <BottomLine />
  </div>
</template>

<style>
.router-dec {
  text-decoration: none;
  color: black;
}

.HomeImg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.HomeImg img {
  width: 500px;
  height: 300px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.app {
  padding: 20px;
  text-align: center;
}

.app span {
  font-size: 2.5em;
  font-weight: bold;
  line-height: 2;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.product-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.product-card {
  margin: 15px;
  opacity: 0;
  /* 初始不可见 */
  visibility: hidden;
  /* 初始不可见 */
  overflow: hidden;
}

.product-list {
  opacity: 0;
  /* 初始不可见 */
  visibility: hidden;
  /* 初始不可见 */
  overflow: hidden;
}
</style>
